<template>
    <div class="container">
        <div class="title">
            <img src="../../static/image/icon_start.png" class="title_icon">
            <div>
                <span>Destiny 2</span>
                <span>Season of the Splicer</span>
            </div>
        </div>
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item class="swipeItem">
                    <img src="../../static/image/banner1.jpg" class="bannerImg">
                </van-swipe-item>
                <van-swipe-item class="swipeItem">
                    <img src="../../static/image/banner2.jpg" class="bannerImg">
                </van-swipe-item>
                <van-swipe-item class="swipeItem">
                    <img src="../../static/image/banner3.jpg" class="bannerImg">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="cell">
            <div class="cell_item" v-for="item in Entries" :key="item" @click="goToPage(item)">
                <span>{{item}}</span>
                <img src="../../static/image/right.png" class="right">
            </div>
        </div>
    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                Entries: ["New Exotic Weapons", "New Exotic Armor", "New Exotic Items", "New Weapons", "New Armor",
                    "New Quests", "New Shaders", "New Sparrows", "New Ships", "New Ghosts"
                ]
            }
        },
        created() {
            // this.getData()
        },
        methods: {
            getData() {
                axios.get("api/getEntries")
                    .then(res => {
                        // console.log(res.data)
                        this.Entries = res.data
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            goToPage(item) {
                var id = item
                if (item === "New Exotic Weapons" || item === "New Weapons") {
                    this.$router.push({
                        name: "Weapons",
                        params: {
                            id
                        },
                    });

                } else if (item === "New Exotic Armor" || item === "New Armor") {
                    this.$router.push({
                        name: "Armors",
                        params: {
                            id
                        },
                    });

                } else {
                    this.$router.push({
                        name: "Other",
                        params: {
                            id
                        },
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .container {
        color: white;

    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
    }

    .title span:nth-child(1) {
        font-size: 50px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
    }

    .title span:nth-child(2) {
        font-size: 30px;
    }

    .title span {
        word-break: normal;
        width: auto;
        display: block;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
    }

    .title_icon {
        width: 70px;
        height: 70px;
    }

    .cell {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cell_item {
        position: relative;
        display: flex;
        font-weight: bold;
        font-size: 15px;
        align-items: center;
        line-height: 60px;
        width: 47%;
        margin: 5px 3px;
        background: #292727;
        padding: 0 2px;

    }

    .cell_item span {
        padding-left: 3px;
    }

    .right {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 2px;
    }

    .bannerImg {
        width: 100%;
    }

    .swipeItem {
        height: 150px;
        overflow: hidden;
    }
</style>